<template>
  <div id="secondPage" ref="secondPage">
    <SearchForm
      v-model="ruleForm"
      :config="config"
      :dataJ="dataJ"
      @search-form="handleSearch"
    />
    <BkBtn :btnConfig="btnConfig" />
    <div style="height: calc(100vh - 300px)">
      <BkTable
        :tableHead="tableJ"
        :tableData="tableData"
        :total="total"
        :page="page"
        @getList="getList"
      />
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px"
      :before-close="dialogClosed"
    >
      <div slot="title" class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
      <el-form
        :inline="true"
        :model="Form"
        :rules="rules"
        ref="Form"
        class="el-form-item_block"
        size="small"
      >
        <el-form-item
          label="字典名称"
          label-width="100px"
          prop="dictName"
          class="el-form-item"
        >
          <el-input
            v-model.trim="dictName"
            placeholder="字典名称"
            clearable
            :disabled="true"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="字典键名"
          label-width="100px"
          prop="dictLabel"
          class="el-form-item"
        >
          <el-input
            v-model.trim="Form.dictLabel"
            placeholder="请输入字典键名"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
         <!-- :disabled="this.operateType == 'edit'" -->
        <el-form-item label="字典键值" label-width="100px" prop="dictValue">
          <el-input
            v-model.trim="Form.dictValue"
            @input="formatNum(Form.dictValue, 'dictValue')"
            placeholder="请输入字典键值"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="字典排序" label-width="100px" prop="dictSort">
          <el-input-number
            v-model.trim="Form.dictSort"
            :min="0"
            controls-position="right"
            maxlength="3"
            show-word-limit
            clearable
          ></el-input-number>
        </el-form-item>

        <el-form-item label="状态" label-width="100px" prop="status">
          <el-select v-model="Form.status" size="small">
            <el-option
              :label="option.label"
              :value="option.value"
              :key="option.value"
              v-for="option in status"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" prop="remark">
          <el-input
            v-model.trim="Form.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClosed" type="info" plain size="small"
          >取消</el-button
        >
        <el-button @click="submitForm('Form')" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   saveDictData,
//   getDictData,
//   deteleDictData,
//   changeStatus2
// } from "../api/sysDic";

import { getDictValueList, saveDictValue, updateDictValue } from "@/api/dict";

export default {
  name: "secondPage",
  props: {
    secondData: Object,
  },
  data() {
    return {
      config: {
        autoWidth: "20%",
      },
      status1: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "启用",
          value: 1,
        },
        {
          label: "停用",
          value: 0,
        },
      ],
      status: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "停用",
          value: 0,
        },
      ],
      tableData: [],
      tableHeight: 0,
      total: 0,
      operateType: "",
      dialogVisible: false,
      dialogTitle: "",
      rules: {
        dictLabel: [
          {
            required: true,
            message: "请输入字典键名",
            trigger: "blur",
          },
        ],
        dictValue: [
          {
            required: true,
            message: "请输入字典键值",
            trigger: "blur",
          },
        ],
        dictSort: [
          {
            required: true,
            message: "请输入字典排序",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "",
            trigger: "",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      Form: {
        dictType: "",
        dictLabel: "",
        dictValue: "",
        dictSort: "",
        status: 1,
        remark: "",
        id: null,
      },

      ruleForm: {
        dictName: "",
        dictLabel: "",
        dictValue: "",
        status: "",
        date: [],
      },
      newData: "",
      dictName: "",
      lockUpdate: "",
    };
  },
  computed: {
    btnConfig() {
      return [
        {
          label: "新增",
          Fn: this.addData,
        },
      ];
    },
    dataJ() {
      return [
        {
          label: "字典键名",
          labelWidth: "70px",
          prop: "dictLabel",
          type: "input",
          placeholder: "请输入字典键名",
        },
        {
          label: "字典键值",
          labelWidth: "80px",
          prop: "dictValue",
          type: "input",
          placeholder: "请输入字典键值",
        },
        {
          label: "状态",
          labelWidth: "80px",
          prop: "status",
          type: "select",
          placeholder: "请选择状态",
          options: this.status1,
        },
        {
          label: "创建日期",
          prop: "date",
          type: "daterange",
        },
      ];
    },
    tableJ() {
      return [
        {
          prop: "dictLabel",
          label: "字典键名",
        },
        {
          prop: "dictValue",
          label: "字典键值",
        },
        {
          prop: "dictSort",
          label: "字典排序",
        },
        {
          prop: "status",
          label: "状态",
          type: "switch",
          activeColor: "#165DFF",
          inactiveColor: "rgba(0, 0, 0, 0.15)",
          activeValue: 1,
          inactiveValue: 0,
          change: (row, index, prop) => {
            this.changeEnabled(row);
          },
          disabled: this.lockUpdate == 2 ? true : false,
        },
        {
          prop: "remark",
          label: "备注",
        },
        {
          prop: "date",
          label: "创建时间",
        },
        {
          prop: "createBy",
          label: "创建用户",
        },
        {
          label: "操作",
          width: "120px",
          align: "center",
          btnList: [
            {
              name: "编辑",
              type: "text",
              handleClick: (val) => {
                this.edit(val);
              },
            },
            {
              name: "删除",
              type: "text",
              handleClick: (val) => {
                this.del(val);
              },
            },
          ],
        },
      ];
    },
  },
  created() {},
  watch: {
    secondData: {
      handler(newName) {
        this.dictName = newName.dictName;
        this.newData = newName.dictType;
        this.lockUpdate = newName.lockUpdate;
        this.getList();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    formatNum(val, key) {
      let temp = val.toString();
      temp = temp.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\-]/gi, "");
      this.Form[key] = temp;
    },
    changeEnabled(row) {
      let data = {
        _id: row._id,
        status: row.status
      };
      updateDictValue(data).then((res) => {
        if (row.status == 0) {
          this.$message.success("停用成功");
        } else {
          this.$message.success("启用成功");
        }
        this.getList();
      });
    },
    getList() {
      getDictValueList({
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        dictType: this.newData,
        dictName: this.ruleForm.dictName,
        dictLabel: this.ruleForm.dictLabel,
        dictValue: this.ruleForm.dictValue,
        status: this.ruleForm.status,
        startDate:
          this.ruleForm.date && this.ruleForm.date.length
            ? this.ruleForm.date[0]
            : "",
        endDate:
          this.ruleForm.date && this.ruleForm.date.length
            ? this.ruleForm.date[1]
            : "",
      }).then((res) => {
        this.tableData = res;
        // this.tableData = res.records;
        // this.total = res.total;
      });
    },
    edit(row) {
      this.operateType = "edit";
      this.dialogTitle = "字典数据编辑";
      this.dialogVisible = true;
      this.Form = JSON.parse(JSON.stringify(row));
    },
    handleSearch() {
      this.page.pageNum = 1;
      this.getList();
    },

    del(row) {
      this.$confirm("确认删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deteleDictData(row.id).then((res) => {
            this.$message.success("删除成功");
            this.dialogVisible = false;
            this.page.pageNum = 1;
            this.getList();
          });
        })
        .catch(() => {});
    },
    addData() {
      this.operateType = "add";
      this.dialogTitle = "新增字典数据";
      this.dialogVisible = true;
      this.Form.status = 1;
    },
    dialogClosed() {
      this.Form = this.$options.data().Form
      this.$refs["Form"].clearValidate();
      this.dialogVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveForm();
        } else {
          return false;
        }
      });
    },
    saveForm() {
      if (this.operateType === "add") {
        saveDictValue({
          dictType: this.Form.dictType,
          dictLabel: this.Form.dictLabel,
          remark: this.Form.remark,
          dictValue: this.Form.dictValue,
          dictSort: this.Form.dictSort,
          status: this.Form.status,
          dictType: this.newData,
        }).then((res) => {
          this.$message.success("新增成功");
          this.dialogClosed()
          this.getList();
        });
      } else {
        updateDictValue({
          ...this.Form,
        }).then((res) => {
          this.$message.success("修改成功");
          this.dialogClosed()
          this.getList();
        });
      }
    },
  },
};
</script>

<style lang="less">
#secondPage {
  height: 97%;

  .bk-btn-box {
  }

  .searchForm {
    padding-top: 0;
  }

  .el-input-number--small {
    width: 100%;
  }
}
</style>
